<template>
    <div style="width:100%;height:100%;" id="hot_gift_chart_dom"></div>
</template>

<script>
const echarts = require('echarts');
export default {
    name: 'hotGiftChart',
    data () {
        return {
            arry:[]
        };
    },
    created () {
        this.getData();
    },
    methods: {
        getData(){
            let self=this;
            self.$axios.get('/gift/top10').then((res) => {
                debugger;
                self.arry  = res.data.data;
                const option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },


                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis:  {
                        show:true,
                        type: 'category',
                        boundaryGap: false,
                        //前十名礼物名称（宇）
                        data: [this.arry[0].name, this.arry[1].name, this.arry[2].name, this.arry[3].name, this.arry[4].name, this.arry[5].name, this.arry[6].name, this.arry[7].name, this.arry[8].name, this.arry[9].name]
                    },
                    yAxis: {
                        type: 'value'

                    },
                    series: [
                        {
                            name:'最高送出',
                            type:'line',
                            //前十名礼物送出数量（宇）
                            data: [this.arry[0].value, this.arry[1].value, this.arry[2].value, this.arry[3].value, this.arry[4].value, this.arry[5].value, this.arry[6].value, this.arry[7].value, this.arry[8].value, this.arry[9].value],
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            }
                        }
                    ]

                };

                const hotGiftCharts = echarts.init(document.getElementById('hot_gift_chart_dom'));
                hotGiftCharts.setOption(option);

                window.addEventListener('resize', function () {
                    hotGiftCharts.resize();
                });
            })
        }
    }
};
</script>